<template>
    <div
        class="bread-nav-container"
        :style="{ width: is_collapse ? 'calc(100% - 90px)' : 'calc(100% - 206px)' }"
    >
        <div class="nav">
            <el-tooltip
                :content="is_collapse ? '打开' : '折叠'"
                placement="right"
                effect="light"
            >
                <el-button
                    :icon="is_collapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
                    @click="$store.commit('nav/toggle_collapse')"
                    size="mini"
                    type="info"
                    plain
                />
            </el-tooltip>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item
                    v-for="item in bread_nav"
                    :to="item.path !== $route.path ? item.path : ''"
                    >{{ item.meta.title }}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <ul class="user-info">
            <li>
                欢迎<router-link :to="{ name: 'UserCenter' }">
                    {{ user_info ? user_info.username : "" }}
                </router-link>
                <i class="el-icon-arrow-down"></i>
            </li>
            <li class="quit" @click="handle_logout">退出</li>
        </ul>
    </div>
</template>

<script>
import { mapState } from "vuex"

export default {
    computed: {
        ...mapState("nav", ["is_collapse"]),
        ...mapState("user", ["user_info"])
    },
    data() {
        return {
            bread_nav: this.$route.matched
        }
    },
    methods: {
        handle_logout() {
            this.$store.dispatch("user/user_logout")
            this.$router.push({ name: "Login" })
        }
    },
    watch: {
        ["$route.matched"](nav) {
            this.bread_nav = nav
        }
    }
}
</script>

<style lang="less">
.bread-nav-container {
    transition: 0.3s;
    display: flex;
    justify-content: space-between;
    height: 35px;
    position: fixed;
    background-color: #eee;
    top: 0;
    z-index: 1;
    .nav {
        display: flex;
        align-items: center;
    }
    .el-button {
        margin-right: 10px;
    }
    .user-info {
        margin-right: 15px;
        li {
            text-align: center;
            height: 30px;
            line-height: 30px;
            &:not(:first-child) {
                display: none;
            }
        }
        &:hover :not(:first-child) {
            display: list-item;
            background-color: #ccc;
        }
        .quit {
            cursor: pointer;
        }
    }
}
</style>
